<template>
  <div class="container">
    <VrHeader type="Sublib"></VrHeader>
    <!-- <UpdateImg></UpdateImg> -->
    <div class="main w-[1200px] mx-auto mt-20">
      <div class="flex">
        <h4 class="m-0 mr-4 text-4xl text-stone-800">
          {{ innerAttr.dataItm.list1[0]?.LibName }}
        </h4>
        <span class="self-end text-2xl text-pink-100 tracking-wider">{{
          innerAttr.dataItm.list1[0]?.Lib
        }}</span>
      </div>

      <div class="text-base mt-2 text-stone-500">
        访问量：{{ innerAttr.dataItm.list1[0]?.FgHit }}
      </div>

      <div>
        <ul class="flex mt-10">
          <template v-for="item in filteredList3" :key="item.Flag">
            <li class="mr-10">
              <p class="text-base text-stone-500">{{ item.FlagName }}</p>
              <p>
                <span class="text-2xl text-stone-800">{{
                  commonTs.splitChange(item.ValueShow)[0]
                }}</span>
                <span class="text-xs ml-1">{{
                  commonTs.splitChange(item.ValueShow)[1]
                }}</span>
              </p>
            </li>
          </template>
        </ul>
      </div>

      <div class="my-10 flex justify-around">
        <button class="shadow-md bg-slate-50 text-xl">新书上架</button>
        <button class="shadow-md bg-slate-50 text-xl">热门推荐</button>
      </div>
      <div class="flex flex-wrap">
        <div
          class="w-[580px] h-[200px] border-1 shadow-md p-4 mr-5 mt-5 relative translate ease-in-out hover:-translate-2 hover:scale-105 duration-300 cursor-pointer"
          v-for="item in innerAttr.dataItm.list2"
          @click="handJump(item.SublibRd)"
          :key="item.SublibNo"
        >
          <div class="flex">
            <h4 class="mr-4 text-4xl text-stone-800">{{ item.SublibShow }}</h4>
            <span class="self-end text-2xl text-pink-100 tracking-wider">{{
              item.SublibEng
            }}</span>
          </div>
          <p class="text-base text-pink-200 tracking-wider text-left">
            {{ item.SublibAddr }}
          </p>
          <div
            class="absolute right-0 top-0 z-[-1] w-2/3 h-full bg-no-repeat bg-cover backdrop-grayscale-0 backdrop-opacity-15 backdrop-brightness-0"
            :style="{
              backgroundImage: `url('${getImageUrl(item.FgPicGrid)}')`
            }"
          >
            <!-- <img :src="imgUrl + item.FgPicGrid + '.jpg'" alt="" /> -->
          </div>
          <div class="mt-2">
            <ul class="flex">
              <template
                v-for="itemList4 in innerAttr.dataItm.list4"
                :key="item.SublibNo + itemList4.ObjNo"
              >
                <li
                  class="mr-10"
                  v-if="shouldShowItem(itemList4, item.SublibNo)"
                >
                  <p class="text-base text-stone-500">
                    {{ itemList4.FlagName }}
                  </p>
                  <p>
                    <span class="text-2xl text-stone-800">{{
                      commonTs.splitChange(itemList4.ValueShow)[0]
                    }}</span>
                    <span class="text-xs ml-1">{{
                      commonTs.splitChange(itemList4.ValueShow)[1]
                    }}</span>
                  </p>
                </li>
              </template>
            </ul>
          </div>
          <div
            v-show="
              searchStore.results.some(
                (result: SearchResult) => result.SublibNo === item.SublibNo
              )
            "
            class="absolute inset-0 border-4 border-yellow-400 rounded-lg pointer-events-none"
          >
            <div
              class="absolute top-0 right-0 bg-yellow-400 text-white px-2 py-1 text-sm"
            >
              {{
                searchStore.results.find(
                  (result) => result.SublibNo === item.SublibNo
                )?.Cnt
              }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  // import Cookies from "js-cookie";
  import { computed, onMounted, reactive } from "vue";
  import { useRouter } from "vue-router";
  import { vrsiteTest, vrSublib } from "@/api/vrsite";
  import VrHeader from "@/components/vrheader/index.vue";
  import { useProStore } from "@/store/pro";
  import type { SearchResult } from "@/store/search";
  import { useSearchStore } from "@/store/search";
  import commonTs from "@/utils/common";
  import crypto from "@/utils/crypto";
  defineOptions({
    name: "VrSite"
  });

  // 内部变量
  //-----------------------------------------------------------------
  interface LibItem {
    Lib: string;
    LibName: string;
    FgHit: number;
  }

  interface SublibItem {
    SublibNo: string;
    FgPicGrid: string;
    SublibShow: string;
    SublibEng: string;
    SublibAddr: string;
    SublibRd: string;
  }

  interface FlagItem {
    Flag: string;
    ValueShow: string;
    FlagName: string;
  }

  interface ObjFlagItem extends FlagItem {
    ObjNo: string;
  }
  interface IInnerAttr {
    dataItm: {
      list1: LibItem[];
      list2: SublibItem[];
      list3: FlagItem[];
      list4: ObjFlagItem[];
    };
    dataLst: unknown[]; // 根据实际数据类型调整（原 [] 类型不准确）
  }
  const innerAttr = reactive<IInnerAttr>({
    dataItm: {
      list1: [],
      list2: [],
      list3: [],
      list4: []
    },
    dataLst: []
  });
  const imgUrl = import.meta.env.VITE_DEPOT_URL + `/lib/szpt/vrlib`;
  const FgLib = {
    common: [
      "分馆数量",
      "实库数量",
      "馆藏种数",
      "馆藏册数",
      "历史借阅",
      "历史归还",
      "历史预约",
      "今日入馆",
      "今日出馆"
    ]
  };
  const FgLibCom = FgLib["common"];

  var FgSublib = {
    common: ["书库数量", "排架数量", "馆藏种数", "馆藏册数"],
    gdut: ["书库数量", "排架数量", "馆藏种数", "馆藏册数"],
    jxncslib: ["书库数量", "排架数量", "馆藏种数", "馆藏册数"]
  };

  const store = useProStore();
  store.pro = "vrlib";

  var FgSubCom = FgSublib["common"] || FgSublib["common"];

  const lisApi = () => {
    vrSublib({ a: {} }).then((res: any) => {
      if (res.error == 0) {
        const {
          vr_ifa_Site_GetSublib_list1: list1,
          vr_ifa_Site_GetSublib_list2: list2,
          vr_ifa_Site_GetSublib_list3: list3,
          vr_ifa_Site_GetSublib_list4: list4
        } = res;

        innerAttr.dataItm = {
          list1: crypto.decryptArray<LibItem>(list1),
          list2: crypto.decryptArray<SublibItem>(list2),
          list3: crypto.decryptArray<FlagItem>(list3),
          list4: crypto.decryptArray<ObjFlagItem>(list4)
        };

        // console.log(innerAttr.dataItm);
      }
    });
  };
  lisApi();

  const listApi2 = () => {
    vrsiteTest({ a: {} }).then((res) => {
      console.log(res);
    });
  };
  listApi2();

  const shouldShowItem = (
    item: { Flag: string; ObjNo: string },
    SublibNo: string
  ) => {
    if (FgSubCom.indexOf(item.Flag) >= 0 && SublibNo === item.ObjNo) {
      return true;
    }
  };
  const filteredList3 = computed(() =>
    innerAttr.dataItm.list3.filter(
      (item) =>
        FgLibCom.includes(item.Flag) &&
        commonTs.splitChange(item.ValueShow)[0] !== "0"
    )
  );

  const getImageUrl = (path: string) => {
    return new URL(`${imgUrl}${path}.jpg`, import.meta.url).href;
  };
  const router = useRouter();

  const handJump = (rd: string) => {
    router.push({
      name: "siteroom",
      params: { id: 123 },
      query: { sublibrd: rd }
    });
  };

  const searchStore = useSearchStore();

  onMounted(() => {});
</script>

<style scoped lang="scss"></style>
